<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>上传文件</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {
		var i = 2;

		//获取id为addFile,并为其添加click函数
		$("#addFile")
				.click(
						function() {
							$(this)
									.parent()
									.parent()
									.before(
											"<tr class='file'><td>File"
													+ i
													+ ":</td><td><input type='file' name='file"
				+ i +"'></td></tr>"
													+ "<tr class='type'><td>Type"
													+ i
													+ ":</td><td><input type='text' name='type"
				+ i +"'></td></tr>"
													+ "<tr class='desc'><td>Desc"
													+ i
													+ ":</td><td><input type='text' name='desc"
				+ i +"'><button id='delete"
				+ i +"'>删除</button></td></tr>");
							i++;

							//获取新添加的删除按钮，获取id为delete
							$("#delete"
									+ (i - 1))
											.click(function() {
												var $tr = $(this).parent()
														.parent();
												$tr.prev("tr").prev("tr").remove();
												$tr.prev("tr").remove();
												$tr.remove();
												//对i重写排序
												$(".file")
														.each(
																function(index) {
																	var n = index + 1;
																	$(this)
																			.find(
																					"td:first")
																			.text(
																					"File"
																							+ n);
																	$(this)
																			.find(
																					"td:last input")
																			.attr(
																					"name",
																					"file"
																							+ n);
																});
												$(".type")
														.each(
																function(index) {
																	var n = index + 1;
																	$(this)
																			.find(
																					"td:first")
																			.text(
																					"Type"
																							+ n);
																	$(this)
																			.find(
																					"td:last input")
																			.attr(
																					"name",
																					"type"
																							+ n);
																});
												$(".desc")
														.each(
																function(index) {
																	var n = index + 1;
																	$(this)
																			.find(
																					"td:first")
																			.text(
																					"Desc"
																							+ n);
																	$(this)
																			.find(
																					"td:last input")
																			.attr(
																					"name",
																					"desc"
																							+ n);
																});

												i = i - 1;
											});
							return false;
						});
	});
</script>
 <script type="text/javascript">
function check(){
	var th = document.form1;
	if(th.file1.value==""){
		alert("未选择文件！");
		return;
	}	
	th.action = "UploadServlet";
	th.submit();
}
</script>
</head>
<body>
${msg}
	<form name="form1" action="" method="post" enctype="multipart/form-data">
		<table>
			<tr class="file">
				<td>File1:</td>
				<td><input type="file" name="file1"></td>
			</tr>
			<tr class="type">
				<td>Type1:</td>
				<td><input type="text" name="type1"></td>
			</tr>
			<tr class="desc">
				<td>Desc1:</td>
				<td><input type="text" name="desc1"></td>
			</tr>
			<tr>
				<td><button onclick="check()">提交</button></td>
				<td><button id="addFile">新增一个文件</button></td>
			</tr>
		</table>
	</form>
</body>
</html>